<template>
  <view>
    <view class="my-container">
      <view class="header">
        <image class="avatar" :src="userInfo.avatar" />
        <text class="nickname">{{userInfo.nickname}}</text>
      </view>
      <view class="tips">
        <view class="left">
          <text class="title">{{userInfo.study_hour}}</text>
          <text class="subtitle">累计学习小时</text>
        </view>
        <view class="middle">
          <text class="title">{{userInfo.follow_count}}</text>
          <text class="subtitle">我的关注</text>
        </view>
        <view class="right">
          <text class="title">{{userInfo.course_count}}</text>
          <text class="subtitle">我的课程</text>
        </view>
      </view>

  <view class="cells">
<van-cell-group >
<van-cell title="学习历史" is-link />
 
</van-cell-group>

<van-cell-group>
<van-cell title="消息提醒" is-link />
 
</van-cell-group>
<van-cell-group>
<van-cell @click="clearCache"  title="清除缓存" is-link />
 
</van-cell-group>
<van-cell-group>
<van-cell title="商务合作" is-link />
 
</van-cell-group>
<van-cell-group>
<van-cell @click="contact" title="在线客服" is-link />
 
</van-cell-group>
 </view> 
  </view>
<!--  
        <view class="cell">
          <text>学习历史</text>
          <image src="/assets/images/arrow@2x.png" />
        </view>
        <view class="cell">
          <text>消息提醒</text>
          <image src="/assets/images/arrow@2x.png" />
        </view>
        <view bindtap="clearCache" class="cell">
          <text>清除缓存</text>
          <image src="/assets/images/arrow@2x.png" />
        </view>
        <view class="cell">
          <text>商务合作</text>
          <image src="/assets/images/arrow@2x.png" />
        </view>
        <view bindtap="contact" class="cell">
          <text>在线客服</text>
          <image src="/assets/images/arrow@2x.png" />
        </view>
      </view> -->
  
  </view>
</template>

<script>
import request from "../utils/util";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  // onLoad() {
  //   this.userinfoData();
  // },
   onShow () {
   this.userinfoData();
  },
  methods: {
    async userinfoData() {
      const res = await request({
        url: "my/info",
      });
      console.log(res);
      this.userInfo = res.data.message;
    },// 清除缓存
clearCache(){
  // 如果你确实需要清除本地缓存的数据，调用 wx.removeStorage
  /**
  wx.removeStorage({
    key: 'key',
    success: (res) => {},
    fail: (res) => {},
    complete: (res) => {},
  })
   */
 uni.showToast({
   title: '缓存清理中...', //提示的内容,
   icon: 'loading', //图标,
   duration: 2000, //延迟时间,
   mask: true, //显示透明蒙层，防止触摸穿透,
   success: res => {
     setTimeout(() => {
       uni.showToast({
         title: '清理缓存成功', //提示的内容,
         icon: 'success', //图标,
         duration: 1000, //延迟时间,
         mask: true //显示透明蒙层，防止触摸穿透
       });
     }, 2000)
   }
 })
},
// 打电话
contact() {
 uni.makePhoneCall({
   phoneNumber: '17704051019',
 })
}
  },
};
</script>

<style lang="less" scoped>
.my-container {
  position: relative;
}

.header {
  width: 750rpx;
  height: 440rpx;
  background-color: #ff8d43;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.avatar {
  width: 176rpx;
  height: 176rpx;
  border-radius: 50%;
}

.nickname {
  margin-top: 30rpx;
  font-size: 21px;
  color: #fff;
}

.tips {
  position: absolute;
  top: 400rpx;
  left: 32rpx;
  right: 32rpx;
  border-radius: 12rpx;
  height: 174rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.title {
  text-align: center;
  font-size: 26px;
  color: #333;
}

.subtitle {
  margin-top: 10rpx;
  text-align: center;
  font-size: 12px;
  color: #a8a8a8;
  font-weight: bold;
}

.left,
.middle,
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.middle {
  position: relative;
}

.middle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30rpx;
  height: 62rpx;
  width: 3rpx;
  background-color: #ebebeb;
}

.middle::after {
  content: "";
  position: absolute;
  right: 0;
  top: 30rpx;
  height: 62rpx;
  width: 3rpx;
  background-color: #ebebeb;
}

.cells {
  background-color: #fff;
  border-radius: 12rpx;
  margin-top: 160rpx;
  margin-left: 32rpx;
  margin-right: 32rpx;
  height: 600rpx;
  margin-bottom: 32rpx;
}

.cell {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f8f8f8;
  padding: 0rpx 20rpx;
}

.cell text {
  font-size: 30rpx;
  color: #333;
}

.cell image {
  width: 48rpx;
  height: 48rpx;
}
</style>
